<template>
    <div class="address-list">
        <!-- 顶部提示信息，关联二手书主题 -->
        <div class="book-notice">
            <van-notice-bar left-icon="volume-o" scrollable>
                请确保收货地址准确，以便顺利收到您选购的二手书！
            </van-notice-bar>
        </div>
        <!-- 直接使用vant组件，具体参见官网 -->
        <van-address-list v-model="chosenAddressId" default-tag-text="默认" add-button-text="+添加地址" :list="addressList"
            @select="onSelect" @add="onAdd" @edit="onEdit" />
    </div>
</template>

<script>
import { showToast } from 'vant';
import { getAddressListAPI } from "@/api/address.js";
export default {
    data() {
        return {
            chosenAddressId: 0,
            addressList: [],
        };
    },

    created() {
        //处理传过来的参数，比如创建订单页面时选择用户地址
        const addressId = this.$route.query.addressId;
        if (addressId !== undefined) {
            this.chosenAddressId = parseInt(addressId) || 0;
        }
        this.getAddressList();
    },
    
    // 当从地址编辑页面返回时，刷新地址列表
    activated() {
        this.getAddressList();
    },

    methods: {
        //触发增加（此时addressEdit路由功能还没实现）
        onAdd() {
            this.$router.push({
                name: "addressEdit"
            });
        },

        //触发编辑（此时addressEdit路由功能还没实现）
        onEdit(item) {
            this.$router.push({
                name: "addressEdit",
                query: { id: item.id },
            });
        },

        //获取登录用户的收货地址
        getAddressList() {
            this.addressList = []; // 清空列表确保数据刷新
            getAddressListAPI().then(result => {
                if (result.data && result.data.length > 0) {
                    result.data.forEach((item) => {
                        let { id, name, tel } = item;
                        // 完善地址信息，包含省份信息
                        let address = (item.province || '') + (item.city || '') + (item.county || '') + (item.addressDetail || '');
                        let isDefault = item.is_default == 1 ? true : false;
                        this.addressList.push({
                            id,
                            name,
                            tel,
                            address,
                            isDefault, // Vant组件会根据isDefault字段显示默认标签
                        });
                        //默认选择
                        if (item.is_default === 1) {
                            this.chosenAddressId = item.id;
                        }
                    });
                }
            }).catch(() => {
                showToast("获取地址列表失败");
            });
        },

        //处理点击列表
        onSelect(item) {
            let addressId = item.id;
            //路由有addressId参数表明是要选择地址id的，把选择结果路由传参返回。
            if (this.$route.query.addressId !== undefined) {
                // 如果是从订单创建页面跳转过来的，返回订单创建页面并传递选中的地址ID
                this.$router.replace({
                    name: "orderCreate",
                    query: {
                        addressId: addressId
                    },
                });
            }
            // 如果没有addressId参数，说明是正常浏览地址列表，不需要跳转
        },
    },
};
</script>

<style scoped lang="less">
@bgColor: #f9f5ed;
@mainColor: #8b4513;

.address-list {
    min-height: 100vh;
    background: @bgColor;
		padding-top: 46px;

    // 顶部提示信息样式
    .book-notice {
        background-color: #f5e8d0;
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    /deep/ .van-address-list {
        margin-top: 5px;
        // 移除整体白色背景
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;

        // 强化卡片主题与二手书籍的匹配程度
        .van-address-item {
            border-left: 5px solid @mainColor; // 增加左侧边框，与主题色呼应
            margin-bottom: 20px; // 加大地址项之间的间距
            padding: 15px; // 增加内边距
            border-radius: 8px; // 添加圆角
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); // 添加阴影
            background-color: white; // 为每个地址项添加白色背景
        }

        .van-address-item .van-radio__icon--checked .van-icon {
            background: @mainColor;
            border-color: @mainColor;
        }

        // 将添加地址的按钮设为主题色
        .van-address-list__add {
            background-color: @mainColor;
            color: white;
            border: none;
            &:hover {
                background-color: darken(@mainColor, 10%); // 鼠标悬停时颜色加深
            }
        }

        .van-button--danger {
            background: @mainColor;
        }
    }
}
</style>